<template>
  <div class="infinite-container">
    <div class="page-header">
      <div class="flex flex_right">
        <div class="pd10">温州市苍南县南宋镇溪光村</div>
      </div>
      <div class="flex flex_center f30" style="border-bottom:2px solid #fff;padding:10px 0;">
        <div>
          抗击疫情捐赠总榜
          <small class="f12">（每日更新）</small>
        </div>
      </div>
      <div class="flex flex_center">
        <div class="bordered-button mr10">截止时间：</div>
        <div class="bordered-button">2020-02-29 16:00:00</div>
      </div>
    </div>

    <table class="page-table" width="100%">
      <tr class="th">
        <td width="20%">序号</td>
        <td width="50%">公司/组织/个人</td>
        <td width="30%">现金/物质</td>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{(index+1)}}</td>
        <td>{{item.title}}</td>
        <td>{{item.price | fixedMoney}}</td>
      </tr>
    </table>

    <!-- <div class="mt20 flex flex_center">
      <mu-raised-button class="no-shadow" @click="$router.push('/admin')">管理员入口</mu-raised-button>
    </div> -->

    <div class="pd10">
        <router-link to="/admin" >管理员入口></router-link>
      </div>
  </div>
</template>
<script>
export default {
  mounted() {
    var temp = [];
    for (var i = 1; i < 100; i++) {
      temp.push({
        title: "张伟" + i,
        price: Math.ceil(Math.random() * 10000)
      });
    }
    this.list = temp;
  },

  data() {
    return {
      list: []
    };
  }
};
</script>

<style lang="less" scoped>
@import "../common/css/flex.css";
@import "../common/css/vars";
.page-header {
  background: #f5161c;
  height: 200px;
  color: #fff;
}
.f30 {
  font-size: 1.8em;
}
.bordered-button {
  color: #333;
  background: #fff;
  border-radius: 12px;
  margin-top: 10px;
  padding: 2px 6px;
}
.page-table {
  border-collapse: collapse;
  text-align: center;
  background: #fff;
  .th {
    background: #fbd5d2;
  }
  td {
    padding: 10px;
    border: 1px solid #f2f2f2;
  }
}
</style>
